<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
</head>
<style>
    body{
        background:#E6E6FA;
    }
</style>
<body>
<h1 style="text-align: center" >日志查询</h1>
<h1></h1>
<div class="table-responsive">
    <table  class="table" >
        <thead  >
        <tr>
            <td width="28%" colspan="2" align="center">&nbsp;操作员名称:<input id="username" type="text" /></td>
            <td width="38%" colspan="2" align="center">
                操作时间：<input id="startexpireTime" type="date" />至
                <input id="endexpireTime" type="date" />
            </td>
            <td colspan="2" align="center">
                <a class="button" onclick="getByPage(1,4)" href="javascript:void(0);"><span>查询</span></a>
            </td>
        </tr>
        <tr  >
            <th  >序号</th>
            <th >操作员名称</th>
            <th >功能模块</th>
            <th >操作类型</th>
            <th >操作描述</th>
            <th >操作时间</th>
        </tr>
        </thead >
        <tbody id="tab">
        </tbody>
    </table >
    <table class="table">
        <tr>
            <td class="font_left">数据:<span id="totalRecord"></span>条</td>
            <td  class="font_left">第</td>
            <td  class="font_left">
                <input id="currentPage" name="textfield2" type="text" size="2" maxlength="4" /> /<span id="totalPage"></span>页
            </td>
            <td >
                <a onclick="firstpage()" href="javascript:void(0);">首页</a>
                <a onclick="uppage()" href="javascript:void(0);">上一页</a>
                <a onclick="listpage()" href="javascript:void(0);">下一页</a>
                <a onclick="endpage()" href="javascript:void(0);">末页</a>
                <a href="logtable.html">刷新</a>
            </td>
        </tr>
    </table>
</div>


</body>
<script type="text/javascript">
    function getByPage(pageNo,pageSize){
        let str="";
        $.ajax({
            "type":"GET",
            "url":"LogTable/getByPage",
            "data":{
                "pageNo":pageNo,
                "pageSize":pageSize,
                "username":$("#username").val(),
                "startexpireTime":$("#startexpireTime").val(),
                "endexpireTime":$("#endexpireTime").val()
            },
            success(rules){
                $.each(jQuery.parseJSON(rules),function(i,n){
                    $("#totalRecord").text(n.totalRecord)
                    $("#totalPage").text(n.totalPage)
                    $("#currentPage").val(n.currentPage)
                    $.each(n.data,function(i,n){
                        str+='<tr bgcolor="white">'+
                            '<td>'+(i+1)+'</td>'+
                            '<td>'+n.operUserName+'</td>'+
                            '<td>'+n.operModul+'</td>'+
                            '<td>'+n.operType+'</td>'+
                            '<td>'+n.operDesc+'</td>'+
                            '<td>'+n.operateDate+'</td>'+
                            '</tr>'
                    });
                });
                $("#tab").html(str);
            }
        });
    }
    $(function () {
        getByPage(1,4)
    })
    //首页
    function  firstpage(){
        getByPage(1,4)
    }
    //尾页
    function  endpage(){
        let currentPage=$("#totalPage").text();
        getByPage(currentPage,4)
    }
    //上一页
    function  uppage(){
        let currentPage=parseInt($("#currentPage").val());
        if (currentPage-1==0){
            getByPage(1,4)
        }else{
            getByPage((currentPage-1),4)
        }
    }
    //下一页
    function  listpage(){
        let currentPage=parseInt($("#currentPage").val());
        if (currentPage==$("#totalPage").text()){
            getByPage(currentPage,4)
        }else {
            getByPage((currentPage+1),4)
        }
    }

</script>
</html>